<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>密码找回</title>
    <link href="css/main.css" rel="stylesheet">
    <script src="js/jquery-3.5.1.js"></script>
    <style>
        body {
            width: 100%;
            height: 100%;
            font-family: 微软雅黑, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
            user-select: none;
        }
    </style>
    <script>
        let lastCaptchaTime = 0;
        $(function () {
            $("#captchaImg")
                .mouseenter(function () {
                    $(this).css("background-color", "#3a3f4d");
                })
                .mouseleave(function () {
                    $(this).css("background-color", "#555555");
                })
                .click(function () {
                    if(new Date().getTime() - lastCaptchaTime < 1000*100){
                        $("#head").addClass("animate__headShake").text("验证码每100秒只能获取一次, 请稍等.");
                        return
                    }
                    this.src = "/captcha/get?t=" + (new Date().getTime());
                    lastCaptchaTime = new Date().getTime();
                });
            $("#recovery")
                .mouseenter(function () {
                    $(this).css("background-color", "#3a3f4d");
                })
                .mouseleave(function () {
                    $(this).css("background-color", "#555555");
                })
                .click(function () {
                    const passwd1 = $("#passwd1");
                    const passwd2 = $("#passwd2");
                    if (passwd1.val() !== passwd2.val()) {
                        $("#tip1").addClass("xWarn").text("两次密码填写不一致.");
                        $("#tip2").addClass("xWarn").text("两次密码填写不一致.");
                        $("#head").addClass("xWarn").text("请仔细检查密码填写呢.");
                        return;
                    }
                    // noinspection JSUnusedLocalSymbols
                    $.ajax(
                        {
                            url: "/user/rec",
                            type: "POST",
                            data: 'mail='+ $("#mail").val()+'&passwd='+ $("#passwd1").val()+'&captcha='+$("#captcha").val(),
                            success: function (xhr) {
                                if (xhr.status === false) {
                                    if (xhr.value === "captcha") {
                                        $("#head").addClass("xWarn").text("验证码填写错误, 请重新试试呢.");
                                        $("#captchaImg").src = "/captcha/get?t=" + (new Date().getTime());
                                    }
                                } else {
                                    $("#head").removeClass("xWarn").text("密码恢复邮件已发送, 请注意查收.");
                                    alert("密码恢复邮件已发送, 请注意查收.");
                                    window.location.href = "login.html";
                                }
                            },
                            error: function (xhr) {
                                $("#head").addClass("xWarn").text("发生了错误, 请刷新一下页面试试呢.");
                            }
                        }
                    );
                });
            $("#login")
                .mouseenter(function () {
                    $(this).css("background-color", "#3a3f4d");
                })
                .mouseleave(function () {
                    $(this).css("background-color", "#555555");
                })
                .click(function () {
                    window.location.href = "login.html";
                });
        });
    </script>

</head>
<body>
<header class="xHeader" id="head">
    找回密码.
</header>

<form class="xForm">
    <div>
        <label class="xInputTittle" type="text">邮箱</label>
        <label for="mail"></label><input class="xInput" id="mail" type="email">
        <p class="xPrompt">输入您的邮箱</p>
        <div class="clapboard"></div>
    </div>
    <div>
        <label class="xInputTittle" type="password">密码</label>
        <label for="passwd1"></label><input class="xInput" id="passwd1" type="password">
        <p class="xPrompt" id="tip1">设置您的密码</p>
        <div class="clapboard"></div>
    </div>
    <div>
        <label class="xInputTittle" type="password">确认密码</label>
        <label for="passwd2"></label><input class="xInput" id="passwd2" type="password">
        <p class="xPrompt" id="tip2">确认您的密码</p>
        <div class="clapboard"></div>
    </div>
    <div>
        <label class="xInputTittle" type="text">验证码</label>
        <label for="captcha"></label><input class="xInput" id="captcha" type="text">
        <p class="xPrompt">输入您在下图中看到的文字, 若看不清请点击切换</p>
        <img alt=" 验证码加载失败" id="captchaImg" src="/captcha/get?t=+ (new Date().getTime()">
        <div class="clapboard"></div>
    </div>
</form>

<div style="width: 61.8%; margin: auto">
    <div class="xButton xLongButton" id="recovery" style="margin: 18px">
        <div class="centerText">恢复密码>></div>
    </div>
    <div class="xButton xLongButton" id="login" style="margin: 18px">
        <div class="centerText">想起来了?请登录>></div>
    </div>
</div>
</body>
</html>